<template>
   <van-cell>
     <!-- 文章标题 -->
     <div slot="title" class="article-item-title">{{article.title}}</div>
     <!-- 文章图片3张 -->
      <div slot="title" v-if="article.cover.type === 3" class="article-item-images">
        <van-image
          v-for="(item,i) in article.cover.images"
          :key="i"
          :src="item"
          fit="cover"
        >
        <template v-slot:error>图片失效..</template>
        </van-image>
      </div>
     <!-- 文章信息 -->
     <div slot="label" class="article-item-info">
       <span>{{article.aut_name}}</span>
       <span>{{article.comm_count}}评论</span>
       <span>{{article.pubdate | relativeTime}}</span>
     </div>
     <!-- 右侧图片 -->
     <div v-if="article.cover.type === 1" slot="default" class="article-item-right-image">
        <van-image
          fit="cover"
          :src="article.cover.images[0]"
        >
        <template v-slot:error>图片失效..</template>
        </van-image>
     </div>
   </van-cell>
</template>

<script>
// 导入处理相对时间工具
import '@/utils/dayjs'
export default {
  name: 'ActicelItleemIndex',
  // 父组件向子组件传值
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
// 文章项标题
.article-item-title {
  font-size: 32px;
}
// 3张图片显示
.article-item-images {
  display: flex;
  flex: 1;
  .van-image {
  width: 232px;
  height: 146px;
  }
  .van-image:nth-child(2) {
    margin: 0 4px;
  }
}
// 文章描述信息
.article-item-info {
  span {
    font-size: 23px;
    margin-right: 14px;
  }
}
// 右侧单张图片
.article-item-right-image {
  .van-image {
  width: 232px;
  height: 146px;
  }
}
</style>
